<template>
    <div>
        <div>
            <van-nav-bar title="搜索" left-text="" left-arrow @click-left="onClickLeft" />
            <van-search v-model="sosuoData" show-action label="东京" placeholder="请输入搜索关键词" @search="onSearch">
                <template #action>
                    <div @click="onClickButton">搜索</div>
                </template>
            </van-search>
        </div>

        <div v-show="yincang">
            <div>
                <p style="margin-left: 20px; color: darkgrey;">热门搜索</p>
                <van-tag color="#ffe1e1" text-color="#ad0000" size="large" style="margin: 10px;">电视</van-tag>
                <van-tag color="#ffe1e1" text-color="#ad0000" size="large" style="margin: 10px;">台灯</van-tag>
                <van-tag color="#ffe1e1" text-color="#ad0000" size="large" style="margin: 10px;">沙发</van-tag>
                <van-tag color="#ffe1e1" text-color="#ad0000" size="large" style="margin: 10px;">真皮</van-tag>
                <van-tag color="#ffe1e1" text-color="#ad0000" size="large" style="margin: 10px;">雕皮</van-tag>
                <van-tag color="#ffe1e1" text-color="#ad0000" size="large" style="margin: 10px;">童装</van-tag>
            </div>
            <div>
                <p style="margin-left: 20px; color: darkgrey;">历史搜索记录</p>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">冰箱</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">短裤</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">背心</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">鞋</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">行李</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">手机壳</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">男鞋</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">男装</van-tag>
                <van-tag color="#7232dd" plain size="large" style="margin: 10px;">拖鞋</van-tag>
            </div>
            <!-- <p style="font-size: 30px; text-align: center; line-height: 500px; color: darkgrey;">暂无历史记录</p> -->

        </div>

    </div>
</template>

<script setup>
import { useRouter } from 'vue-router';
let router = useRouter()
let onClickLeft = () => {
    console.log('搜索页返回首页');

    router.push('/')
}
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api';
let sosuoData = ref([])

const yincang = ref(true)
watch(sosuoData, (value) => {
    console.log('搜索', value);
    if (sosuoData.length != 0)
    {
        yincang.value = false
        qsearchApi(value).then(res => 
        {
            console.log('搜索数据', res);
            sosuoData.value=ref.data.message;
        })

    }
    else 
    {

    }

})

</script>

<style lang="scss" scoped></style>